<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>邮件分享</title>
    <style>
        * {
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            padding: 0;
            margin: 0
        }

        html, body {
            font-size: 16px;
            font-family: Microsoft YaHei, Arial, sans-serif
        }

        a {
            text-decoration: none !important;
            color: inherit;
        }

        .card {
            color: #666666;
            text-align: center;
            position: relative;
            padding: 0 32px;
            background-color: #fff;
            width: 100%;
            max-width: 560px;
            min-width: 560px;
            margin: 0 auto;
            height: 100vh;
            min-height: 780px;
            max-height: 780px;
            background: url(https://welynk.cn/static/ad_share_email.png) no-repeat center center;
            background-size: cover;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center
        }

        .el-avatar {
            font-size: .875rem;
            display: inline-block;
            text-align: center;
            overflow: hidden;
            color: #fff;
            background: #c0c4cc;
            line-height: 2.5rem;
            border-radius: 50%;
            width: 4.25rem !important;
            height: 4.25rem !important;
            background-color: #fff;
            border: .0625rem solid #e6e6e6
        }

        .el-avatar > img {
            display: block;
            width: 100%;
            height: 100%;
            vertical-align: middle
        }

        .text-grey-008 {
            color: #36374a !important
        }

        .text-grey-008 {
            color: #36374a !important
        }

        .lh-50 {
            line-height: 3.125rem !important
        }

        .text-16 {
            font-size: 1rem !important
        }

        .text-28 {
            font-size: 1.75rem !important
        }

        .text-bold {
            font-weight: bold
        }

        .text-light {
            font-weight: 400 !important
        }

        .text-grey-005 {
            color: #657491 !important
        }

        .text-14 {
            font-size: .875rem !important
        }

        .lh-25 {
            line-height: 1.5625rem !important
        }

        .text-grey-006 {
            color: #6e7491 !important
        }

        .text-left {
            text-align: left
        }

        .el-button {
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
            -webkit-user-select: none;
            display: inline-block;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            border: .0625rem solid #dcdfe6;
            -webkit-appearance: none;
            text-align: center;
            box-sizing: border-box;
            margin: 0;
            font-weight: 500;
            font-size: .875rem;
            border-radius: .25rem;
            padding: 1rem 1.25rem;
            transition: background-color .2s linear, border-color .2s linear;
            background-color: #3370ff;
            border-color: #3370ff;
            color: #fff;
            outline: 0;
            text-decoration: none !important
        }

        .el-button:hover {
            background-color: #133c9a;
            border-color: #133c9a
        }

        .text-grey-009 {
            color: #27273f !important
        }

        .mt-8 {
            margin-top: .5rem !important
        }

        .mr-8 {
            margin-right: .5rem !important
        }

        .mx-8 {
            margin-left: .5rem !important;
            margin-right: .5rem !important
        }

        .absolute {
            position: absolute !important
        }

        .relative {
            position: relative !important
        }

        .flex {
            display: flex
        }

        .flex-sub {
            flex: 1;
            width: 0
        }

        .align-center {
            align-items: center
        }

        .justify-center {
            justify-content: center
        }

        .logo {
            font-weight: 400;
            font-size: 14px;
            line-height: 1;
            color: #A1B0CC;
            text-decoration: none !important
        }

        .text-blue {
            color: #072E7E !important
        }
    </style>
</head>

<body>
<!-- 域名更新时，全局替换网址（包括图片）：https://creditlinex.com/ -->
<div class="card relative">
    <!-- logo -->
    <a href="https://welynk.cn/" class="logo absolute flex align-center cursor-pointer" style="top:20px;left:32px;">
        <img title="WeLynk" src="https://welynk.cn/static/logo-grey.svg"
             style="width:23px;height:23px;margin-right:8px;">
        <div class="">WeLynk 领客</div>
    </a>

    <!-- 版权 Powered by WeLynk -->
    <div class="absolute text-grey-009 text-14 lh-25 text-light" style="bottom:20px;left:32px;">Powered by <a
            href="https://welynk.cn/" class="text-bold">WeLynk</a></div>

    <div class="card-main">
        <!-- logo -->
        <span class="w-68 h-68 el-avatar el-avatar--circle">
<!--                <img src="https://creditlinex.com/static/default_avatar_company.svg" style="object-fit: cover;">-->
                <img src="{companyLogo}" style="object-fit: cover;">
            </span>
        <!-- 名称 -->
        <div class="text-grey-008 text-bold text-blue" style="font-size: 28px;line-height:50px;">{companyShortName}
        </div>
        <!-- 全称 -->
        <div class="text-grey-005 text-light text-blue" style="font-size: 20px;line-height:50px;">{companyName}</div>
        <!-- slogen -->
        <div class="text-grey-005 text-light text-blue" style="font-size: 16px;line-height:20px;">{companySlogan}</div>
        <div class="" style="height: 118px"></div>
        <!-- 。。。向您发送了一笔交易信息 -->
        <div class="text-grey-006 text-14 lh-25 text-light">
            <span class="text-bold text-grey-009 mr-8">{nickname}</span>提醒您
        </div>
        <!-- 点击查看您与。。。之间的全部订单、交付、结算信息 -->
        <div class="text-grey-006 text-14 lh-25 text-light mt-8">
            您与<span class="text-bold text-grey-009 mx-8">{companyShortName}</span>间的一笔结算即将到截止日期，请查看详情
        </div>
        <div class="" style="height: 32px"></div>
        <div class="mb-10">
            <!-- 链接 -->
            <!--                <a href="https://creditlinex.com/#/share/order?cidA=1522385453634609152&detailId=1523156250930241536&cidB=1522389527222345728" target="_blank" class="el-button el-button&#45;&#45;primary" style="width: 380px;">-->
            <a href="{shareLink}" target="_blank" class="el-button el-button--primary" style="width: 380px;">
                <span>查看详情</span>
            </a>
        </div>
    </div>

</div>
</body>
</html>
